<template>
  <!--  配送端-->
  <el-row>
    <div class="title-box">
      <el-text class="title">我的订单</el-text>
    </div>
  </el-row>
  <el-row class="searchArea">
    <el-form label-width="200px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="订单编号">
            <el-input v-model="data.carClient.orderId">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态">
            <el-select v-model="data.carClient.status" placeholder="全部状态">
              <el-option v-for="status in data.status" :label="status.descs" :value="status.descs"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="">
            <el-button @click="driverPage" type="success" class="btnSearch">
              <el-icon>
                <Search/>
              </el-icon>&nbsp;&nbsp;&nbsp;搜索
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-row>
  <el-row>
    <div class="table-box">
      <el-table :data="data.list" border class="carTable" size="large">
        <el-table-column prop="orderId" label="订单编号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="client" label="客户名称"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="consignee" label="联系人"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="consigneePhone" label="联系电话"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="position" label="位置信息"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="deliverTime" label="最后更新时间"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="配送状态"></el-table-column>
        <el-table-column label="操作" width="300px" align="center">
          <template #default="scope">
            <el-button-group>
              <el-button type="primary" @click="start(scope.row)" class="btn">
                开始配送
              </el-button>
              <el-button type="success" @click="updateStatus(scope.row)" class="btn">
                确认送达
              </el-button>
              <el-button type="warning" @click="updatePosition(scope.row,data.position)" class="btn">
                更新位置
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="width: 1235px; display: flex;justify-content: right">
        <el-pagination
            style="margin-top: 10px"
            v-model:current-page="data.driverPage.currentPage"
            @current-change="driverPage"
            layout="prev, pager, next"
            :page-size="5"
            :total="data.driverPage.total"
            class="carPage"
        />
      </el-row>
    </div>
  </el-row>
</template>

<script lang="ts" setup>
import {reactive, onMounted} from "vue";
import axios from "axios";
import moment from "moment/moment";
import DriverMain from "../driver/DriverMain"
import {ElMessage} from "element-plus";

const data = reactive({
  carClient: {
    driverId: "",
    orderId: "",
    status: ""
  },
  userId: "",
  list: [],
  driverPage: {
    currentPage: 1,
    total: ""
  },
  position: "",
  adcode: "",
  status: []
})
//获取USERId
const getUserId = () => {
  const key = sessionStorage.getItem("userId");
  if (key) {
    console.log("userId" + key);
    data.userId = key;
  } else {
    errorMessage("获取userId失败");
  }
}
//获取driverId
const getDriverId = () => {
  axios({
    url: "http://localhost:8080/driver/selectByUserId",
    method: "get",
    params: {
      userId: data.userId
    }
  }).then((res) => {
    console.log(res.data.data);
    data.carClient.driverId = res.data.data.driverId;
    console.log(data.carClient.driverId + "zzzzzzzzz")
    driverPage();
  })
}
//司机订单信息
const driverPage = () => {
  console.log("driverId" + data.carClient.driverId + data.carClient.orderId);
  axios({
    url: "http://localhost:8080/carClient/driverOrder",
    method: "get",
    params: {
      currentPage: data.driverPage.currentPage,
      size: 5,
      driverId: data.carClient.driverId,
      orderId: data.carClient.orderId,
      status: data.carClient.status
    }
  }).then((res) => {
    data.list = res.data.data;
    data.driverPage.total = res.data.total;
  })
}
//获取定位
const getPosition = () => {
  axios({
    url: "https://restapi.amap.com/v3/ip?",
    method: "post",
    params: {
      key: "4decff4600b71b61f564bc330f4d4a08"
    }
  }).then((res) => {
    console.log(res.data.city);
    data.position = res.data.province + res.data.city;
    sessionStorage.setItem("position",data.position);
    data.adcode = res.data.adcode;
  })
}
const updatePosition = (row: any, position: string) => {

  axios({
    url: "http://localhost:8080/deliverOrder/updatePosition",
    method: "post",
    params: {
      orderId: row.orderId,
      position: "天津天津市"
    }
  }).then((res) => {
    if (res.data) {
      successMessage("位置更新成功");
      updateDeliverTime(row.orderId);
      driverPage();
    } else {
      errorMessage('位置更新失败');
    }
  })
}

//成功消息
const successMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'success',
  });
}
//失败消息
const errorMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'error',
  });
}

//更新最后操作时间
const updateDeliverTime = (orderId: String) => {
  axios({
    url: "http://localhost:8080/Order/updateEndTime",
    method: "post",
    params: {
      orderId: orderId,
      deliverTime: moment(new Date()).format(' YYYY-MM-DD HH:mm:ss')
    }
  })
}
//开始配送
const start = (row: any) => {
  axios({
    url: "http://localhost:8080/deliverOrder/updateStatus",
    method: "post",
    params: {
      orderId: row.orderId,
      statusId: 26
    }
  }).then((res) => {
    if (res.data) {
      updatePosition(row, data.position);
      driverPage();
    } else {
      errorMessage("修改状态失败");
    }
  })
}

let initStatus = () => {
  axios({
    url: "http://localhost:8080/dict/selectStatus",
    method: "get",
    params: ""
  }).then((res) => {
    data.status = res.data.data;
    console.log(data.status);
  })
}


//送达
const updateStatus = (row: any) => {
  axios({
    url: "http://localhost:8080/deliverOrder/updateStatus",
    method: "post",
    params: {
      orderId: row.orderId,
      statusId: 27
    }
  }).then((res) => {
    if (res.data) {
      successMessage("已送达")
      updatePosition(row, data.position);
      driverPage();
    } else {
      errorMessage("修改状态失败");
    }
  })
}
onMounted(() => {
  initStatus();
  getUserId();
  getDriverId();
  // getPosition2();
  getPosition();
})
const getPosition2 = () => {
  const key = sessionStorage.getItem("position");
  if (key) {
    console.log("位置" + key);
    data.position = key;
  } else {
    console.log("位置" + key);
    errorMessage("获取位置失败")
  }

}


</script>

<style scoped>


.table-box {
  margin-left: 15px;
  margin-top: 10px;
  width: 100%;
}


.title-box {
  margin-top: 20px;
  width: 100%;
  height: 100px;
  border: 2px rgba(66, 61, 61, 0.89) dashed;
  background: #efedcb;
  border-radius: 30px;
}

.title {
  font-size: 40px;
  color: #6b5614;
  line-height: 100px;
  margin-left: 40px;
}

.btn {
  width: 70px;
  border-radius: 20px;
}

.searchArea {
  margin-top: 20px;
}

.btnSearch {
  width: 240px;
  border-radius: 20px;
}

/*表格样式*/
.carTable {
  width: 100%;
}
</style>